<style>
    #pmm-update-modal .pre-scrollable {
        height: 200px;
        overflow-y: scroll;
    }

    #pmm-update-modal .pre-scrollable pre {
        border-radius: 0;
        color: darkgrey;
        background-color: #292929;
        font-size: 0.6em;
        border: none;
    }

    #pmm-update-modal .output-content {
        background-color: #1f1d1d;
        padding: 1em;
    }

    #pmm-update-modal .text-right {
        float: right;
    }

    #pmm-update-modal .text-block {
        padding: 80px;
    }

    #pmm-update-modal .text-primary {
        color: #00729b;
        cursor: pointer;
    }

    #pmm-update-modal .text-primary:hover {
        color: #005f81;
    }

    #pmm-update-modal .btn-block {
        width: 100%;
    }

</style>
<div class="modal-dialog" role="document" id="pmm-update-modal">
    <div class="modal-content" ng-if="!isUpdated">
        <div class="modal-body">
            <h4 ng-if="!errorMessage.length">Update in progress <i class="fa fa-spinner fa-spin" ng-if="isLoaderShown"></i></h4>
            <h4 ng-if="errorMessage.length">Update failed</h4>
            <div class="output-content">
                <div>
                    <i class="fa" ng-click="isOutputShown = !isOutputShown"
                       ng-class="{'fa-chevron-down': !isOutputShown, 'fa-chevron-up':isOutputShown}"></i>
                    <span>Log</span>
                    <span class="text-secondary text-primary text-right" clipboard-button="output">Copy to clipboard</span>
                </div>

                <div class="pre-scrollable output-value" ng-if="output && output.length && isOutputShown">
                    <pre>{{ output }}</pre>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-content" ng-if="isUpdated && !isLoaderShown">
        <div class="modal-body">
            <h4>Successfully updated</h4>
            <div>
                <div>
                    <div class="text-center text-block">
                        <h6>PMM has been successfully upgraded to version {{ version }}</h6>
                    </div>
                </div>
                <div class="btn-holder">
                    <div>
                        <button class="btn btn-secondary btn-block" data-dismiss="modal" ng-click="reloadAfterUpdate()">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
